<!-- 公共组件（课程/活动）(目前只应用于我的活动列表和详情) -->
<template>
	<view :class="styleType==1?'listwrap one':'listwrap two'" :key="item.id" @click="todetail(item.id,classoract)">
		<view v-if="!jlbHide" class="top-row">
			<view class="jlb">
				<view class="jlbicon"></view>
				<text>{{item.clubName}}</text>
				<van-icon v-if="arrowShow" name="arrow" size="12px" color="#CCCCCC" />
			</view>
			<view class="top-status" v-if="styleType==1">
				{{matchStatus}}
			</view>
		</view>
		<view class="listcon">
			<!-- 课程 -->
			<view class="imgwrap" v-if="classoract =='class'">
				<image v-if="classoract=='class' && item.coachIcon" class="class_img" :src="item.coachIcon"
					mode="aspectFill" />
				<image v-else class="class_img" :src="'@/static/images/image-default.png'|addBaseImgUrl" />
			</view>
			<!-- 活动 -->
			<view class="imgwrap" v-if="classoract !=='class'">
				<image v-if="item.actImgUrl" class="act_img" :src="item.actImgUrl" mode="aspectFill" />
				<image v-else class="act_img" :src="'@/static/images/image-default.png'|addBaseImgUrl" />
				<view class="small pos" v-if="classoract!=='class'">
					<view v-if="item.actType=='2'">赛事</view>
				</view>
			</view>
			<!-- 活动 -->
			<view :class="type=='one' || type=='two'?'ccc':'ccc bor'" v-if="classoract !=='class'">
				<view class="con">
					<!-- 标题 -->
					<view class="tr">
						<text class="line-clamp-1 tit">{{item.title||item.actName}}</text>
						<view class="r">
							<view v-if="item.payStartCountDown!=='0'" class="rtop act-price">
								￥<text>{{item.cost|floorTwo}}</text>
							</view>
						</view>
					</view>
					<!-- 场馆距离 -->
					<view class="cgwrap">
						<text class="cgtit cgtitbor line-clamp-1">{{item.placeName}}</text>
						<text class="cgtit24">{{item.distanceStr}}</text>
					</view>
					<view class="tr" v-if="item.startTime&&item.endTime">
						<view class="huismall">{{item.startDate | datetit}} {{item.startDate | getWeek}}
							{{item.startTime.slice(0,5)+'-'+item.endTime.slice(0,5)}}
						</view>
					</view>
					<view class="tr jibie">
						<view class="small">
							<view class="man">{{'男L'+item.levelStart+'-L'+item.levelEnd}}</view>
							<view class="woman">{{'女L'+item.girlLevelStart+'-L'+item.girlLevelEnd}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 课程 -->
			<view v-else :class="type=='one' || type=='two'?'ccc classCCC':'ccc classCCC bor'">
				<view class="con">
					<!-- 标题 -->
					<view class="tr">
						<text class="line-clamp-1 tit">{{item.title}}</text>
						<view class="r">
							<text class="rtop cgtit24">{{item.distanceStr}}</text>
							<!-- <view v-if="item.payStartCountDown!=='0'" class="rtop start">即将开始</view> -->
							<!-- <view v-else class="rtop"><text class="ss">{{item.enterNum}}</text><text class="cc">人报名</text></view> -->
						</view>
					</view>
					<!-- 场馆距离 -->
					<view class="cgwrap">
						<text class="cgtit cgtitbor line-clamp-1">{{item.placeName}}</text>
						<!-- <text class="rtop cgtit24">{{item.distanceStr}}</text> -->
					</view>
					<view class="tr flexbot">
						<view class="smallbg">
							<view v-if="item.type=='0'">私教课</view>
							<view v-if="item.type=='1'">团体课</view>
							<view v-if="item.type=='2'">集训班</view>

							<view v-if="item.medal=='1'">金牌教练</view>
						</view>
						<view class="jiage">
							<view v-if="item.state=='2'" class="end">报名结束</view>
							<view v-else> <text class="ys">¥</text><text class="yb">{{item | showCost}}<text
										class="font24">{{(item.configCount&&item.configCount >1)?'起':'' }}</text></text>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import vanButton from "@/wxcomponents/vant/dist/button/index"
	import vanIcon from "@/wxcomponents/vant/dist/icon/index"
	import {
		rili
	} from '@/common/js/util.js'
	export default {
		name: 'XjxComItem',
		props: {
			item: {
				type: Object,
				default: {}
			},
			styletype: {
				type: String,
				default: ''
			},
			classoract: {
				type: String,
				default: 'activity'
			},
			jlbHide: {
				type: Boolean,
				default: false
			},
			styleType: {
				type: Number,
				default: 1
			},
			arrowShow: {
				type: Boolean,
				default: true
			}
		},
		components: {
			vanButton,
			vanIcon
		},
		data() {
			return {

			};
		},
		computed: {
			...mapState(['accessToken', 'clubInfo']),
			matchStatus(){
				let item = this.item
				if(item.actType==2&&item.isRefund=='0'){ // 未发生退款的赛事活动
					return item.eventStatusValue
				}else if(item.actStatus=='1'){
					return item.actStatusValue
				}else if(item.orderStatus=='4'||(item.orderStatus=='6'&&item.isRefund=='1')){
					return item.orderStatusName
				}else{
					return item.actStateStr
				}
			}
		},
		mounted() {

		},
		methods: {
			todetail(id, text) { //去详情
				this.$emit('todetail', id, text, '22')
			},
		},
		filters: {
			datetit(a) {
				if (a) {
					let date = a.split("-");
					return `${date[1]}月${date[2]}日`
				} else {
					return ''
				}
			},
			showCost(a) {
				let arr = [a.cost, a.costGirl, a.costBoyVip, a.costGirlVip];
				arr.sort(function(a, b) {
					return a - b;
				})

				return arr[0];
			},
			setstatus(a) {
				//0:未开始，1：进行中，2：已结束
				let text = '';
				switch (a) {
					case 0:
						text = '未开始';
						break;
					case 1:
						text = '进行中';
						break;
					case 2:
						text = '已结束';
						break;
				}
				return text;
			},
			settype(a) { //课程类型（1长期2短期）
				let text = '';
				switch (a) {
					case '0':
						text = '私教课';
						break;
					case '1':
						text = '团体课';
						break;
					case '2':
						text = '集训班';
						break;
				}
				return text;
			},
			getWeek(a) {
				let aa = rili.getweekDay(a);
				let text = '';
				switch (aa) {
					case 1:
						text = '周一';
						break;
					case 2:
						text = '周二';
						break;
					case 3:
						text = '周三';
						break;
					case 4:
						text = '周四';
						break;
					case 5:
						text = '周五';
						break;
					case 6:
						text = '周六';
						break;
					case 0:
						text = '周日';
						break;
				}
				return text;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listwrap {
		width: 100%;
		background-color: #fff;
		padding: 24rpx;

		.top-row {
			display: flex;
			justify-content: space-between;
			flex-flow: row nowrap;
			align-items: center;

			.jlb {
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;

				.jlbicon {
					width: 32rpx;
					height: 32rpx;
					background: url('@/static/images/icon-vipcard-club.png') no-repeat;
					background-size: 100% 100%;
					margin-right: 12rpx;
				}

				text {
					font-size: 26rpx;
					color: #999;
					line-height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.top-status {
				font-size: 24rpx;
				color: $bg-color-yellow1;
				line-height: 24rpx;
			}
		}

		.listcon {
			display: flex;
			justify-content: space-between;
			padding-top: 20rpx;
		}

		.imgwrap {
			// padding:30rpx 0;
			margin-right: 19rpx;
			position: relative;

			.pos {
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.class_img {
			width: 122rpx;
			height: 122rpx;
			border-radius: 122rpx;

		}

		.act_img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 15rpx 15rpx;
			overflow: hidden;
			// padding:30rpx 0 ;
		}

		.ccc {
			width: 540rpx;
			display: flex;
			justify-content: space-between;
		}

		.classCCC {
			width: 570rpx;
		}

		.bor {
			// padding-bottom: 20rpx;
			border-bottom: 1px solid #e9e9e9;
		}

		.con {
			// width:312rpx;
			display: flex;
			flex-wrap: wrap;
			// height:190rpx;
			width: 100%;

			.act-price {
				font-size: 24rpx;
				line-height: 38rpx;

				text {
					font-size: 30rpx;
				}
			}

			.tr {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				line-height: 30rpx;
				height: 30rpx;
				&:last-of-type{
					margin-bottom: 0;
				}
			}

			.tit {
				font-size: 30rpx;
				color: #333;
				line-height: 30rpx;
				height: 30rpx;
				overflow: hidden;
				align-self: flex-start;
				width: 370rpx;
				margin-bottom: 10rpx;
			}

			.cgwrap {
				display: flex;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 10rpx;
			}

			.cgtit {
				font-size: 24rpx;
				color: #999;
				line-height: 30rpx;
				// margin-bottom: 10rpx;
				align-self: flex-start;
				border-right: 1rpx solid #ccc;
				// padding-right: 20rpx;
				margin-right: 20rpx;
				max-width: 300rpx;
			}

			.cgtitbor {
				border: none;
			}

			.cgtit24 {
				font-size: 24rpx;
				color: #999;
				line-height: 30rpx;
				align-self: flex-start;
				width: 100rpx;
				// padding-right: 20rpx;
				text-align: right;
			}
		}

		.huismall {
			// padding:0 10rpx;
			color: #999;
			height: 34rpx;
			border-radius: 5rpx;
			line-height: 30rpx;
			font-size: 24rpx;
			// border:1px solid #e1e1e1;
		}

		.small {
			display: flex;
			width: 100%;

			// align-self:flex-end;
			>view {
				padding: 0 10rpx;
				background-color: $bg-color-cheng;
				color: $text-color-cheng;
				height: 32rpx;
				border-radius: 5rpx;
				line-height: 29.5rpx;
				margin-right: 10rpx;
				font-size: 24rpx;
			}

			.man {
				background-color: transparent !important;
				border: 1rpx solid #C8DBFF;
				color: #2E87FF !important;
				line-height: 29rpx;
			}

			.woman {
				background-color: transparent !important;
				border: 1rpx solid #FFC8C3;
				color: #E14806;
				line-height: 29rpx;
			}
		}

		.smallbg {
			display: flex;
			width: 100%;

			// align-self:flex-end;
			>view {
				padding: 0 10rpx;
				background-color: $bg-color-cheng;
				color: $text-color-cheng;
				height: 32rpx;
				border-radius: 5rpx;
				line-height: 32rpx;
				margin-right: 10rpx;
				font-size: 24rpx;
			}
		}

		.ss {
			color: $public-color-yellow1;
			font-size: 24rpx;
			line-height: 25rpx;
		}

		.cc {
			font-size: 24rpx;
			color: #ccc;
		}

		.bigs {
			font-size: 36rpx;
			color: $public-color-yellow1;
			line-height: 32rpx;
		}

		.r {
			width: 150rpx;
			display: flex;
			flex-wrap: wrap;
			// padding-right:20rpx;
			// flex-direction: column;
			// line-height: 25rpx;
			align-content: space-between;

			.rtop {
				align-self: flex-start;
				text-align: right;
				width: 100%;
				// padding-right: 20rpx;
				line-height: 30rpx;
				white-space: nowrap
			}

			.start {
				// width:151rpx;
				// height:47rpx;
				// background:url($public-baseImgUrl+'classstart.png') no-repeat;
				// background-size: 100% 100%;
				// color:#fff;
				// align-self: flex-start;
				// text-align: center;
				// font-size: 24rpx;
				// line-height:47rpx;
				width: 100%;
				font-size: 24rpx;
				color: #FDB42E;
				text-align: right;
				align-self: flex-start;
				white-space: nowrap
			}

			.end {
				// width:151rpx;
				// height:47rpx;
				// background:url('@/static/images/classend.png') no-repeat;
				// background-size: 100% 100%;
				// color:#fff;
				// align-self: flex-start;
				// text-align: center;
				// font-size: 24rpx;
				// line-height:47rpx;
				// font-size:30rpx;
				// color:#FDB42E;
			}

		}

		.rbot {
			align-self: flex-end;
			text-align: right;
			width: 100%;
			line-height: 32rpx;
			// padding-right: 20rpx;
		}

		.flexbot {
			align-self: flex-end;
			align-items: center;

		}

	}

	.jibie {
		height: 32rpx;
		line-height: 32rpx;
	}

	.jiage {
		// padding-right: 20rpx;
		align-self: flex-end;
		line-height: 32rpx;

		.ys {
			font-size: 24rpx;
			color: #FDB42E;
			margin-right: 5rpx;
			line-height: 32rpx;
		}

		.yb {
			font-size: 36rpx;
			color: #FDB42E;
			line-height: 32rpx;
			white-space: nowrap;
			line-height: 32rpx;
		}

		.font24 {
			font-size: 24rpx;
		}

		.end {
			font-size: 30rpx;
			color: #FDB42E;
			white-space: nowrap;
		}
	}

	.listwrap:last-of-type {
		.bor {
			border: none !important;
		}
	}

	.two {
		border-radius: 25rpx;
		background-color: $bg-color-white;
		box-shadow: 0px 5rpx 5rpx 0px rgba(204, 204, 204, 0.5);
		width: 730rpx;
		box-sizing: border-box;
		margin: 15rpx 10rpx;
		overflow: hidden;
		padding: 30rpx 20rpx!important;
	}

	.one {
		background-color: $bg-color-white;
		width: 730rpx;
		box-sizing: border-box;
		margin: 0 10rpx;
		overflow: hidden;
	}
</style>
